import React, { useEffect, useState } from 'react';
import { ContentWrapper, Image, useGlobalOption } from 'web-component';
import './demo1.less';

useGlobalOption({
  px2rem: (px) => {
    return (px / 100).toFixed(2) + 'rem';
  },
});

Image.use({
  px2rem: (px) => {
    return (px / 100).toFixed(2) + 'rem';
  },
});

const successImg =
  'http://img01sit.meituncdn.com/group1/M00/94/E8/99c7b6a464dc427cb94f197de8232468.png';
const failImg =
  'https://img02.meituncdn.com/group1/M00/6A/A7/2d14d7f46a7b441abe.jpg';
const successImg2 =
  'https://images.unsplash.com/photo-1620476214170-1d8080f65cdb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80';

const cdnImg =
  'https://img01.meituncdn.com/group1/M00/44/33/91b442858871459d9b33604944548525.jpg?watermark/3/image/aHR0cDovL2ltZzAxLm1laXR1bmNkbi5jb20vZ3JvdXAxL00wMC80QS8wMi82ZmVkOThhMWZkYTI0YThiOGI4ZDAyYzI3NTE2ODM1MC5wbmc=/gravity/North/dissolve/80/dx/0/dy/1';
const cdnImg1 = cdnImg + '|imageView2/2/q/30/format/png';
const cdnImg2 = cdnImg + '|imageView2/2/q/30/format/png|imageMogr2';

export default () => {
  const [realUrl, setRealUrl] = useState('');
  useEffect(() => {
    (document as any).querySelector('html').style.fontSize = '100px';

    setTimeout(() => {
      setRealUrl(successImg);
    }, 1000);
  }, []);

  return (
    <div>
      <ContentWrapper fontSize={14} line={1} color="#000000">
        这是一个异步的图片
      </ContentWrapper>
      <Image
        src={realUrl}
        width={100}
        height={100}
        className={'test'}
        onClick={() => alert('1')}
        onContainerClick={() => alert('2')}
      ></Image>
      <ContentWrapper fontSize={14} line={1} color="#000000">
        这是一个同步的图片
      </ContentWrapper>
      <Image
        src={successImg}
        width={100}
        height={100}
        px2rem={(px) => {
          return (px / 50).toFixed(2) + 'rem';
        }}
      ></Image>
      <ContentWrapper fontSize={14} line={1} color="#000000">
        这是一个七牛CDN图片
      </ContentWrapper>
      <Image src={cdnImg} width={100} height={100} qiniu></Image>
      <Image
        src={cdnImg}
        width={100}
        height={100}
        qiniu={{
          magnify: 4,
          quality: 100,
          mode: 1,
        }}
      ></Image>
      <Image
        src={cdnImg1}
        width={100}
        height={100}
        qiniu={{
          magnify: 4,
          quality: 100,
          mode: 1,
        }}
      ></Image>
      <Image
        src={
          'http://img02.meituncdn.com/group1/M00/1B/FF/ddff1b6a3bf543b082b9ed43e038ae14.jpg'
        }
        width={100}
        height={100}
        qiniu={{
          magnify: 4,
          quality: 100,
          mode: 1,
        }}
      ></Image>
      <Image
        src={cdnImg2}
        width={100}
        height={100}
        qiniu={{
          magnify: 4,
          quality: 100,
          mode: 1,
        }}
      ></Image>
      <ContentWrapper fontSize={14} line={1} color="#000000">
        这是一个不正常的图片会加载失败
      </ContentWrapper>

      <Image
        src={failImg}
        width={100}
        height={100}
        fallback={
          <ContentWrapper fontSize={14} line={1} color="#000000">
            加载失败了
          </ContentWrapper>
        }
      ></Image>
      <ContentWrapper fontSize={14} line={1} color="#000000">
        懒加载功能 往下滑动...
      </ContentWrapper>
      <div style={{ width: 375, height: 500 }}></div>
      <Image src={successImg2} width={100} height={100} lazyLoad></Image>
    </div>
  );
};
